<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="450" height="360"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    /**
     * Draws an arrow on the canvas.
     * @param {CanvasRenderingContext2D} ctx The canvas rendering context.
     * @param {number} x1 The starting x-coordinate.
     * @param {number} y1 The starting y-coordinate.
     * @param {number} x2 The ending x-coordinate.
     * @param {number} y2 The ending y-coordinate.
     * @param {number} headlen The length of the arrowhead.
     */
    function drawArrow(ctx, x1, y1, x2, y2, headlen = 10) {
        const dx = x2 - x1;
        const dy = y2 - y1;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Main Drawing ---

    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    
    // --- Draw Axes and Labels ---
    ctx.lineWidth = 3;
    ctx.font = 'bold 20px sans-serif';
    ctx.textAlign = 'center';
    
    const ox = 150;
    const oy = 250;

    // z-axis (UP)
    drawArrow(ctx, ox, oy, ox, 50, 15);
    ctx.fillText("UP (z)", ox - 30, 45);

    // x-axis (East)
    drawArrow(ctx, ox, oy, 400, oy, 15);
    ctx.fillText("East (x)", 360, oy + 25);

    // y-axis (North)
    const y_end_x = ox + 180;
    const y_end_y = oy - 90;
    drawArrow(ctx, ox, oy, y_end_x, y_end_y, 15);
    ctx.fillText("North (y)", y_end_x + 10, y_end_y - 5);

    // Origin Label
    ctx.fillText("0", ox - 20, oy + 5);
    
    // --- Draw Current Sheet Arrows ---
    ctx.lineWidth = 2.5; // Current arrows are slightly thinner
    const y_vec_x = 180;
    const y_vec_y = -90;
    const current_headlen = 12;

    // Bottom 2 arrows
    let t1 = -0.3;
    let sx1 = ox + t1 * y_vec_x;
    let sy1 = oy + t1 * y_vec_y;
    drawArrow(ctx, sx1, sy1, sx1 + 130, sy1, current_headlen);

    let t2 = -0.15;
    let sx2 = ox + t2 * y_vec_x;
    let sy2 = oy + t2 * y_vec_y;
    drawArrow(ctx, sx2, sy2, sx2 + 150, sy2, current_headlen);

    // Arrow on x-axis
    drawArrow(ctx, ox, oy, ox + 170, oy, current_headlen);

    // Top 3 arrows
    let t4 = 0.2;
    let sx4 = ox + t4 * y_vec_x;
    let sy4 = oy + t4 * y_vec_y;
    drawArrow(ctx, sx4, sy4, sx4 + 145, sy4, current_headlen);

    let t5 = 0.4;
    let sx5 = ox + t5 * y_vec_x;
    let sy5 = oy + t5 * y_vec_y;
    drawArrow(ctx, sx5, sy5, sx5 + 125, sy5, current_headlen);

    let t6 = 0.6;
    let sx6 = ox + t6 * y_vec_x;
    let sy6 = oy + t6 * y_vec_y;
    drawArrow(ctx, sx6, sy6, sx6 + 105, sy6, current_headlen);

    // --- Draw Remaining Labels ---
    
    // Lambda symbol for current density
    ctx.font = 'italic bold 24px serif';
    ctx.fillText("λ", 260, 195);

    // Figure caption
    ctx.font = '20px sans-serif';
    ctx.fillText("Fig. 2.50", 225, 340);

</script>
</body>
</html>